<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>WebKit CSS3 动画基础演示</title>
		<style type="text/css">
			@charset "utf-8";
			/* CSS Document */
			#blah {
				-webkit-transition: all .3s ease-in-out;
			}
			#blah:hover {
				-webkit-transform: scale(1.5);
			}
			.ads {
				-webkit-transition: all 0.2s ease-out;
				opacity: 0.5;
			}
			.ads:hover {
				-webkit-box-shadow: 0 0 10px #000000;
				opacity: 1;
			}
			.border {
				-webkit-transition: all 0.2s ease-out;
				border: 10px solid #FFF000;
			}
			.border:hover {
				border-width: 20px
			}
			a.link:link, a.link:visited {
				color: blue;
				-webkit-transition: color .25s linear .1s;
				transition: color .25s linear .1s;
			}
			a.link:hover {
				color: red;
				-webkit-transition: color .25s linear;
				transition: color .25s linear;
			}
			a.link2:link, a.link2:visited {
				color: blue;
				-webkit-transition: color .25s linear .1s;
				transition: color .25s linear .1s;
			}
			a.link2:hover {
				color: red;
				background-color: #FF0;
				-webkit-transition: color .25s linear, background-color 1s linear;
				transition: color .25s linear, background-color :#FF0 0.3s ease-in-out;
			}
			.arrow {
				-webkit-transition: all 1s ease-in-out;
			}
			.arrow:hover {
				-webkit-transform: rotate(720deg);
			}
			.arrow-js {
				-webkit-transition: all 1s ease-in-out;
			}
			#nudge {
				-webkit-transition-property: color, background-color, padding-left;
				-webkit-transition-duration: 500ms, 500ms, 500ms
			}
			#nudge:hover {
				background-color: #efefef;
				color: #333;
				padding-left: 50px
			}
		</style>
	</head>
	<body>
		<div style="width:1000px; margin:40px auto 0">
			<div id="blah" style=" background-color:#666; width:500px; height:30px; color:#FFF; line-height:30px; text-align: center; margin:0 auto">
				放大效果
			</div>
			<div class="ads" style=" background-color:#666; width:500px; height:30px; color:#FFF; line-height:30px; text-align: center; margin:50px auto 0">
				渐入效果
			</div>
			<div class="border" style=" background-color:#666; width:500px; height:30px; color:#FFF; line-height:30px; text-align: center; margin:50px auto 0">
				修改边框效果
			</div>
			<div class="arrow" style=" background-color:#666; width:100px; height:100px; color:#FFF; line-height:30px; text-align: center; margin:50px auto 0">
				旋转效果
			</div>
			<div class="arrow-js" style="background-color: rgb(102, 102, 102); width: 100px; height: 100px; color: rgb(255, 255, 255); line-height: 30px; text-align: center; margin-top: 50px; margin-right: auto; margin-bottom: 0px; margin-left: auto; " onmouseover="this.style.webkitTransform=&#39;rotate(720deg)&#39;" onmouseout="this.style.webkitTransform=&#39;&#39;">
				<span class="arrow" style=" background-color:#666; width:100px; height:100px; color:#FFF; line-height:30px; text-align: center; margin:50px auto 0">旋转效果</span>（js触发css3）
			</div>
			<div id="nudge" style="  margin:50px auto 0; border:5px solid #666; line-height:30px">
				文本移动背景变化效果（多重效果）
			</div>
			<div style=" background-color:#efefef; width:500px; height:30px; color:#FFF; line-height:30px; text-align: center; margin:50px auto 0">
				<a href="http://www.css88.com/demo/css3_Animation/#" class="link"><strong>链接文本变色</strong></a>
			</div>
			<div style=" background-color:#efefef; width:500px; height:30px; color:#FFF; line-height:30px; text-align: center; margin:50px auto 0">
				<a href="http://www.css88.com/demo/css3_Animation/#" class="link2"><strong>。。。。</strong></a>）
			</div>
		</div>
	</body>
</html>